img {
width: auto ;
max-width: 100% ;
height: auto ;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

/* max screen size with mouse*/

@media all and (min-width: 1050px) and (hover : hover) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 5vh ;
max-height: 12vh ;
width: 50% ;
}
#header1 img {
	max-height: 100% ;
}
#header2 {
order: 2 ;
text-align: left ;
padding-top: 5vh ;
max-height: 12vh ;
width: 50% ;
align-self: flex-end ;
}
#header2 img {
	max-width: 16% ;
	max-height: 12vh ;
}
#header3 {
	order: 2 ;
	display: none ;
}

#leftmargin {
order: 1 ;
width: 5vw
}
#content {
order: 2 ;
width: 70vw ;
text-align: right ;
height: 76vh ;
padding-top: 3vh ;
}
#ToC {
order: 3 ;
width: 20vw ;
height: 76vh ;
padding-top: 3vh
}
#bottomToC {
order: 4 ;
display: none ;
}
}

/* max screen size with touch*/

@media all and (min-width: 1050px) and (hover : none) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 5vh ;
max-height: 12vh ;
width: 50% ;
}
#header1 img {
	max-height: 100% ;
}
#header2 {
	order: 2 ;
	display: none ;
}
#header2 img {
	max-width: 16% ;
	max-height: 12vh ;
}
#header3 {
order: 2 ;
text-align: left ;
padding-top: 5vh ;
max-height: 12vh ;
width: 50% ;
align-self: flex-end ;
}
#header3 img {
	max-width: 16% ;
	max-height: 12vh ;
}
#leftmargin {
order: 1 ;
width: 5vw
}
#content {
order: 2 ;
width: 70vw ;
text-align: right ;
height: 76vh ;
padding-top: 3vh ;
}
#ToC {
order: 3 ;
width: 20vw ;
height: 76vh ;
padding-top: 3vh
}
#bottomToC {
order: 4 ;
display: none ;
}
}

/* medium screen width with mouse*/


@media all and (min-width: 900px) and (max-width: 1049px) and (hover : hover) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
}
#header1 img {
	max-height: 100% ;
}
#header2 {
order: 2 ;
text-align: left ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
align-self: flex-end ;
}
#header2 img {
	max-width: 16% ;
}
#header3 {
order: 2 ;
display: none ;
}
#header3 img {
	max-width: 16% ;
}
#leftmargin {
order: 1 ;
display: none ;
}
#bottomToC {
order: 2 ;
display: none ;
}
#content {
order: 3 ;
width: 80% ;
text-align: right ;
height: 79vh ;
padding-top: 1vh
}
#ToC {
order: 4 ;
width: 20% ;
height: 79vh ;
padding-top: 1vh
}
}

/* medium screen width with touch*/


@media all and (min-width: 900px) and (max-width: 1049px) and (hover : none) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
}
#header1 img {
	max-height: 100% ;
}
#header2 {
order: 2 ;
display: none ;
}
#header2 img {
	max-width: 16% ;
}
#header3 {
order: 2 ;
text-align: left ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
align-self: flex-end ;
}
#header3 img {
	max-width: 16% ;
}
#leftmargin {
order: 1 ;
display: none ;
}
#bottomToC {
order: 2 ;
display: none ;
}
#content {
order: 3 ;
width: 80% ;
text-align: right ;
height: 79vh ;
padding-top: 1vh
}
#ToC {
order: 4 ;
width: 20% ;
height: 79vh ;
padding-top: 1vh
}
}

/* small screen portrait with mouse */

@media all and (max-width: 899px) and (hover : hover){
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 1vh ;
max-height: 15vh ;
width: 50% ;
}
#header1 img {
	max-height: 15vh ;
}
#header2 {
float: left ;
text-align: left ;
padding-top: .5vh ;
max-height: 12vh ;
width: 75% ;
}
#header2 img {
	max-height: 12vh ;
	max-width: 31% ;
}
#header3 {
display: none ;
}
#header3 img {
	max-height: 12vh ;
	max-width: 31% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 3vh
}
#ToC {
order: 2 ;
width: 100% ;
display: none ;
}
#leftmargin {
order: 3 ;
display: none ;
}
#bottomToC {
order: 4 ;
text-align: center ;
width: 100% ;
padding-top: 1vh
}
}

/* small screen portrait with touch */

@media all and (max-width: 899px) and (hover : none){
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 1vh ;
max-height: 15vh ;
width: 50% ;
}
#header1 img {
	max-height: 15vh ;
}
#header2 {
display: none ;
}
#header2 img {
	max-height: 12vh ;
	max-width: 31% ;
}
#header3 {
float: left ;
text-align: left ;
padding-top: .5vh ;
max-height: 12vh ;
width: 75% ;
}
#header3 img {
	max-height: 12vh ;
	max-width: 31% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 3vh
}
#ToC {
order: 2 ;
width: 100% ;
display: none ;
}
#leftmargin {
order: 3 ;
display: none ;
}
#bottomToC {
order: 4 ;
text-align: center ;
width: 100% ;
padding-top: 1vh
}
}

/* small screen landscape with mouse */
@media all and (max-width: 899px) and (orientation:landscape) and (hover : hover) {
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 1vh ;
max-height: 15vh ;
width: 50% ;
}
#header1 img {
	max-height: 15vh ;
}
#header2 {
float: left ;
text-align: left ;
padding-top: .5vh ;
max-height: 15vh ;
width: 75% ;
}
#header2 img {
	max-height: 15vh ;
	max-width: 32% ;
}
#header3 {
display: none ;
}
#header3 img {
	max-height: 15vh ;
	max-width: 32% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 1vh ;
}
#ToC {
order: 2 ;
width: 100% ;
display: none ;
}
#leftmargin {
order: 3 ;
display: none ;
}
#bottomToC {
order: 4 ;
text-align: center ;
width: 100% ;
}
}

/* small screen landscape with touch */
@media all and (max-width: 899px) and (orientation:landscape) and (hover : none) {
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 1vh ;
max-height: 15vh ;
width: 50% ;
}
#header1 img {
	max-height: 15vh ;
}
#header2 {
display: none ;
}
#header2 img {
	max-height: 15vh ;
	max-width: 32% ;
}
#header3 {
float: left ;
text-align: left ;
padding-top: .5vh ;
max-height: 15vh ;
width: 75% ;
}
#header3 img {
	max-height: 15vh ;
	max-width: 32% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 1vh ;
}
#ToC {
order: 2 ;
width: 100% ;
display: none ;
}
#leftmargin {
order: 3 ;
display: none ;
}
#bottomToC {
order: 4 ;
text-align: center ;
width: 100% ;
}
}